<template>
    <div>
        <div class="card" style="margin-bottom: 5px;">
            <el-input placeholder="请输入名称查询" v-model="data.name" style=" width: 240px;margin-right: 10px;"
                prefix-icon="Search">
            </el-input>
            <el-button type="primary" @click="load">查 询</el-button>
            <el-button type="warning" @click="reset">重 置</el-button>
        </div>
        <div class="card" style="margin-bottom: 5px;">
            <el-button type="primary" @click="handleAdd">新 增</el-button>
            <el-button type="warning" @click="delBatch">批量删 除</el-button>
            <el-button type="success" @click="">导 入</el-button>
            <el-button type="info" @click="">导 出</el-button>
        </div>
        <div class="card" style="margin-bottom: 5px;">
            <el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" />
                <el-table-column prop="username" label="账号" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="sex" label="性别" />
                <el-table-column prop="no" label="工号" />
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="descr" label="个人介绍" show-overflow-tooltip />
                <el-table-column prop="dept_name" label="部门" />
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" @click="handleUpdate(scope.row)" :icon="Edit" circle></el-button>
                        <el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button>

                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div style="margin-top: 15px;">
            <el-pagination @size-change="load" @current-change="load" v-model:current-page="data.pageNum"
                v-model:page-size="data.pageSize" background layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 15, 20]" :total="data.total" />
        </div>

        <div>
            <el-dialog v-model="data.formVisible" title="员工信息" width="500" destroy-on-close>
                <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px"
                    style="padding-right: 50px;padding-top: 30px;">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="data.form.sex">
                            <el-radio value="男" label="男"></el-radio>
                            <el-radio value="女" label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="工号" prop="no">
                        <el-input v-model="data.form.no" autocomplete="off" placeholder="请输入工号" />
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input-number v-model="data.form.age" style="width: 180px;" :min="18" placeholder="请输入年龄" />
                    </el-form-item>
                    <el-form-item label="个人介绍">
                        <el-input v-model="data.form.descr" type="textarea" :rows="3" autocomplete="off"
                            placeholder="请输入个人介绍" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="data.formVisible = false">取消</el-button>
                        <el-button type="primary" @click="save">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>

</template>

<script setup>

import { reactive, ref } from 'vue'
import { Edit,Delete, Search } from '@element-plus/icons-vue'
import request from '@/utils/request.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const data = reactive({
    name: null,
    tableData: [],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    formVisible: false,
    form: {},
    age: null,
    ids: [], // 用于存储选中的员工id
    username: null,
    rules: {
        username: [
            { required: true, message: '请输入账号', trigger: 'blur', }
        ],
        name: [
            { required: true, message: '请输入名称', trigger: 'blur', }
        ],
        no: [
            { required: true, message: '请输入工号', trigger: 'blur', }
        ]
    }
})

const formRef = ref()
const load =() =>{
    request.get('/employee/selectPage',{ //?pageNum=1&pageSize=10
        params:{
            pageNum:data.pageNum,
            pageSize: data.pageSize,
            name: data.name,
        }
    }).then (res =>{
        data.tableData = res.data.list
        data.total = res.data.total
    })
}
load()
const reset = () => {
    data.name = null
    load()
}
const handleAdd = () => {
    data.formVisible = true
    data.form = {}
}
const save = () => {  //在一个保存方法里做两个操作,新增和修改
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            data.form.id ? update() : add() //判断form里面有没有id,如果有就是修改,没有就是新增
        }
    })
    
    
}
const add = () => { //新增的对象里面没有id
    request.post('/employee/add', data.form).then(res => {
        if (res.code === '200') {
            data.formVisible = false // 关闭弹窗
            ElMessage.success('操作成功')
            load() // 新增后要重新加载最新数据
        } else {
            ElMessage.error(res.msg)
        }
    })
}
const handleUpdate = (row) => {
    data.form = JSON.parse(JSON.stringify(row)) // 深拷贝,避免直接修改原数据
    data.formVisible = true

}
const update = () => { //修改的对象里面有包含id
    request.put('/employee/updateById', data.form).then(res => {
        if (res.code === '200') {
            data.formVisible = false // 关闭弹窗
            ElMessage.success('操作成功')
            load() // 更新后要重新加载最新数据
        } else {
            ElMessage.error(res.msg)
        }
    })
}
const del = (id) => {
    ElMessageBox.confirm('是否确认删除该员工信息?', '删除确认', { type: 'warning' }).then(() => {
    request.delete('/employee/deleteById/' + id).then(res => {
        if (res.code === '200') {
            ElMessage.success('操作成功')
            load() // 更新后要重新加载最新数据
        } else {
            ElMessage.error(res.msg)
        }
    })
    }).catch()
}
const handleSelectionChange = (rows) => { //返回所有选中的行对象数组
    //从选中的行对象数组中获取id
    data.ids = rows.map(row => row.id)
    console.log('选中员工的ID:', data.ids)
}
const delBatch = () => {
    if (data.ids.length === 0) {
        ElMessage.warning('请先选择要删除的员工')
        return
    }
    ElMessageBox.confirm('是否确认删除该员工信息?', '删除确认', { type: 'warning' }).then(() => {
        request.delete('/employee/deleteBatch', 
             { data: data.ids } // 传递选中的员工id数组
        ).then(res => {
            if (res.code === '200') {
                ElMessage.success('批量删除成功')
                load() // 删除后要重新加载最新数据
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch()

}


</script>